<template>
    <el-dialog title=" " :visible.sync="faceDialogVisible" top="20px" width="1080px" append-to-body>
        <el-form :model="form.model" :rules="form.rules" ref="form">
            <el-row>
                <el-col :span="16">
                    <ImgCutter
                        ref="imgCutterModal"
                        label="选择图片"
                        fileType="jpeg"
                        :DoNotDisplayCopyright="true"
                        :crossOrigin="true"
                        crossOriginHeader="*"
                        rate=""
                        toolBgc="none"
                        :isModal="false"
                        :showChooseBtn="true"
                        :lockScroll="true"
                        :boxWidth="670"
                        :boxHeight="700"
                        :cutWidth="480"
                        :cutHeight="640"
                        :sizeChange="false"
                        :moveAble="true"
                        :imgMove="true"
                        :originalGraph="false"
                        WatermarkText=""
                        WatermarkTextFont=""
                        WatermarkTextColor="#00ff00"
                        :WatermarkTextX="0.95"
                        :WatermarkTextY="0.95"
                        :smallToUpload="true"
                        :saveCutPosition="true"
                        :scaleAble="true"
                        :previewMode="true"
                        :toolBoxOverflow="true"
                        @cutDown="cutDown"
                        @onPrintImg="onPrintImg">
                        <template #open>
                            <el-buttont type="primary">选择图片</el-buttont>
                        </template>
                        <template #cancel>&nbsp;</template>
                        <template #confirm>&nbsp;</template>
                    </ImgCutter>
                </el-col>
                <el-col :span="8">
                    <div style="width:100%">
                        <img style="width:100%" :src="imgurl"/>
                    </div>
                    <el-form-item label="有效时间" prop="datetime">
                        <el-date-picker style="width:100%" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                            v-model="form.model.datetime"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea" :rows="6" v-model="form.model.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            
        </el-form>
        <template #footer>
            <!-- <el-button @click="$refs.file.click()">上传新头像</el-button> -->
            <el-button @click="faceDialogVisible=false">取消</el-button>
            <el-button @click="handleCut" v-if="imgurl">确定</el-button>
        </template>
    </el-dialog>
</template>
<script>
import ImgCutter from 'vue-img-cutter';

export default {
    components: { ImgCutter },
    props: {
        config: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            form: {
                model: {
                    datetime: null,
                    remark: ''  
                },
                rules: {
                    datetime: [{trigger: 'blur', required: true, message: '请选择有效时间'}],
                    remark: [{trigger: 'blur', required: true, message: '请填写备注'}],
                }
            },

            faceDialogVisible: true,
            
            imgurl: '',
            imgsrc: ''
        }
    },
    watch: {
        faceDialogVisible: {
            immediate: true,
            handler() {
                this.$emit('close', this.faceDialogVisible)
            }
        }
    },
    created() {
        if( !this.config.avatar ) return false;
        this.imgsrc = this.config.avatar;
    },
    methods: {
        cutDown(fileName, file, blob, dataURL, index) {
            // console.info(arguments);
        },
        onPrintImg({dataURL}) {
            this.imgurl = dataURL;
            // console.info(arguments);
        },
        handleCut() {
            this.$refs.form.validate(valid=>{
                if( !valid )  return false;
                // var canvas = this.$refs.canvas;
                // this.imgurl = canvas.toDataURL();
                this.$emit('success', {
                    src: this.imgurl,
                    ...this.form.model
                });
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.cut-wrapper {
    position: relative;
    margin: 0 auto;
    width: 480px; height: 640px;
    background: #eee;
    overflow: hidden;
    display: inline-block;
    &.ismove { cursor: move; }
    cursor: move;
    & +canvas {
        margin-left: 20px;
        // position: absolute;
        // left: 0; top: 0;
        // z-index: -1;
        // opacity: 0;
    }
    .el-button {
        position: absolute;
        left: 50%; top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}
</style>